<template>
  <div class="add-low-calorie">
    <hx-navbar ref="hxnb" :config="config"> </hx-navbar>
    <u-cell-group>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-36">
          <view class="w-180 c-99"> 色号: </view>
          <view class="flex-1">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholder="请输入" border="none" shape="circle"
              v-model="listData.colorNumber">
            </u--input>
          </view>
        </view>
        <view slot="right-icon" class="flex">
          <u-switch v-model="listData.isEnable"></u-switch> 主要
        </view>
      </u-cell>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-36">
          <view class="w-180 c-99"> 颜色: </view>
          <view class="flex-1">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholder="请输入" border="none" shape="circle"
              v-model="listData.color">
            </u--input>
          </view>
        </view>
      </u-cell>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-36" @click="comeGoTypeTypeShow = true">
          <view class="w-180 c-99"> 色系： </view>
          <view class="flex-1">{{ listData.colorSystemName }} </view>
        </view>
      </u-cell>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-36">
          <view class="w-180 c-99"> 起定量: </view>
          <view class="flex-1"> <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholder="请输入"
              border="none" shape="circle" v-model="listData.startOrderQuantity">
            </u--input> </view>
        </view>
      </u-cell>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-36">
          <view class="w-180 c-99"> 备注: </view>
          <view class="flex-1">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholder="请输入" border="none" shape="circle"
              v-model="listData.remarks">
            </u--input>
          </view>
        </view>
      </u-cell>
      <u-gap height="5" bgColor="#eee"></u-gap>
    </u-cell-group>
    <u-picker keyName="label" @cancel="comeGoTypeTypeShow = false" :show="comeGoTypeTypeShow"
      :columns="comeGoTypeTypeShowColumns" @confirm="switchChange"></u-picker>

    <u-button type="primary" class="m-t-20" @click="btnSure">确定</u-button>
  </div>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  getColorSysData
} from "@/apis/bill/information/product";
export default {
  components: { clIcon },
  data() {
    return {
      config: {
        title: "颜色信息",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        colorNumber: "", // 色号
        color: "", // 颜色
        colorSystemName: "", //色系类型
        colorSystemId: "", //色系id
        startOrderQuantity: "", //	起定量
        remarks: "", //备注
        isEnable: false, //是否主要
      },
      // 色系列表
      comeGoTypeTypeShow: false,
      comeGoTypeTypeShowColumns: [],
    };
  },
  computed: {},
  methods: {
    btnSure() {
      uni.$emit("on-pdccc-sure", this.listData || {});
    },
    switchChange(event, i) {
      this.listData.colorSystemName = event.value[0].label;
      this.listData.colorSystemId = event.value[0].value;
      this.comeGoTypeTypeShow = false;
    },
    getColorSysDatas() {
      getColorSysData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.comeGoTypeTypeShowColumns.push(data);
        console.log("色系类型", data);
      });
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    this.getColorSysDatas();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped></style>